<script setup>
  import { provide, ref, watch } from 'vue';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
  import {
    GridComponent,
    LegendComponent,
    TitleComponent,
    TooltipComponent,
  } from 'echarts/components';
  import VChart, { THEME_KEY } from 'vue-echarts';

  const props = defineProps({
    option: Object,
    updateOptions: Object,
    height: {
      type: [Number, String],
      default: 400,
    },
    width: {
      type: [Number, String],
      default: '',
    },
    loading: Boolean,
    manualUpdate: {
      type: Boolean,
      default: false,
    },
  });

  provide(THEME_KEY, 'light');

  use([
    CanvasRenderer,
    PieChart,
    LineChart,
    BarChart,
    RadarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
  ]);

  const vchart = ref(null);
  const setOption = (option) => {
    vchart.value.setOption(option);
  };

  watch(
    () => props.option,
    () => {
      setOption(props.option);
    },
  );

  defineExpose({
    setOption,
  });
</script>

<template>
  <VChart
    ref="vchart"
    :option="option"
    :update-options="updateOptions"
    :style="{ height: `${height}px`, width: width ? `${width}px` : '100%' }"
    autoresize
    :loading="loading"
    :manual-update="manualUpdate"
  />
</template>

<style lang="scss" scoped></style>
